<template>
  <div class="tuisong_details">
    <!-- 左侧图片信息 -->
    <div class="tuisong_details_left">
      <!-- 大图 -->
      <img
        v-if="!detailsObj.transformimgblob"
        src="../assets/image/默认大图.jpg"
        alt=""
      />
      <img v-else :src="detailsObj.transformimgblob" alt="" />
      <!-- 标签 -->
      <div class="tdl_tags">
        <span v-for="item in detailsObj.tags" :key="item">{{ item }}</span>
      </div>
    </div>
    <!-- 右侧详细信息 -->
    <el-scrollbar class="tuisong_details_right">
      <div class="tuisong_details_right_box">
        <div class="tdr_title">
          详细数据 <br />
          <span>Detailed data</span>
        </div>
        <div class="tdr_content">
          <!-- 从获取的对象中挑出对应字段进行渲染 -->
          <p>产品级别:{{ detailsObj.productlevel }}</p>
          <p>分辨率:{{ detailsObj.imagegsd }}</p>
          <p>中心经度:{{ detailsObj.centerlongitude }}</p>
          <p>中心纬度:{{ detailsObj.centerlatitude }}</p>
          <p>卫星代号:{{ detailsObj.satelliteid }}</p>
          <p>传感器编号:{{ detailsObj.sensorid }}</p>
          <p class="tdr_content_date">中心时间:{{ detailsObj.centertime }}</p>
          <p class="tdr_content_date">生产日期:{{ detailsObj.productdate }}</p>
          <p>云量:{{ detailsObj.cloudpercent }}</p>
          <p>产品类型:{{ detailsObj.producttype }}</p>
          <p>数据格式:{{ detailsObj.productformat }}</p>
          <p>产品质量:{{ detailsObj.productquality }}</p>
          <p>侧摆角:{{ detailsObj.yaw }}</p>
          <p>数据来源:{{ detailsObj.sjly }}</p>
          <p>数据文件类型:{{ detailsObj.sjwjlx }}</p>
          <p class="tdr_content_date">添加时间:{{ detailsObj.addtime }}</p>
          <p class="tdr_content_date">开始时间:{{ detailsObj.starttime }}</p>
          <p class="tdr_content_date">结束时间:{{ detailsObj.endtime }}</p>
          <p>
            历史操作：<span
              class="tdr_content_view"
              @click="historyShowChange(true)"
              >查看</span
            >
          </p>
        </div>
        <GraphChart :pieChartData="pieChartData" :userid="userid" />
      </div>
    </el-scrollbar>
    <el-dialog
      :visible.sync="historyShow"
      width="1040px"
      top="300px"
      @close="historyShowChange(false)"
    >
      <Graph6 :historyData="historyData" />
    </el-dialog>
  </div>
</template>

<script>
import getData from "../api/home";
// import PieChart from "../components/pieChart.vue";
import GraphChart from "../components/GraphChart.vue";
import Graph6 from "../components/Graph6.vue";
export default {
  name: "tuiSongDetails",
  data() {
    return {
      detailsObj: {},
      // pieChartData: {},
      pieChartData: [],
      userid: null,
      historyShow: false,
      historyData: null,
    };
  },
  components: {
    GraphChart,
    Graph6,
  },
  methods: {
    historyShowChange(isShow) {
      this.historyShow = isShow;
    },
    getHistory(id, userid) {
      getData.getHistoryById(id, userid).then((res1) => {
        let res = {
          data: {
            jdts: [
              {
                actiontype: "取消编程订单",
                username: "test",
                xqd: -10,
              },
            ],
          },
        };
        let arr = res.data;
        for (let i = 0; i < 5; i++) {
          arr.jdts.push({
            actiontype: "取消编程订单" + i,
            username: "test" + i,
            xqd: -50 + i,
          });
        }
        console.log(arr);
        this.historyData = arr;
      });
    },
  },
  mounted() {
    const id = this.$route.query.id;
    const userid = this.$store.state.userInfo.userid;
    this.userid = userid;
    getData.getImgLabelById(id, userid).then((res) => {
      this.detailsObj = res.data;
      //  [
      //         { value: data.fblXqd, name: "分辨率" },
      //         { value: data.cgqXqd, name: "传感器" },
      //         { value: data.qyXqd, name: "区域" },
      //         { value: data.wxptXqd, name: "卫星" },
      //       ]

      // if (Number(res.data.wxptXqd) > 0) {
      //   this.pieChartData.push({
      //     value: Number(res.data.wxptXqd),
      //     name: "卫星",
      //   });
      // }
      // if (Number(res.data.cgqXqd) > 0) {
      //   this.pieChartData.push({
      //     value: Number(res.data.cgqXqd),
      //     name: "传感器",
      //   });
      // }
      // if (Number(res.data.fblXqd) > 0) {
      //   this.pieChartData.push({
      //     value: Number(res.data.fblXqd),
      //     name: "分辨率",
      //   });
      // }
      // if (Number(res.data.qyXqd) > 0) {
      //   this.pieChartData.push({ value: Number(res.data.qyXqd), name: "区域" });
      // }

      // this.pieChartData = {
      //   wxptXqd: Number(res.data.wxptXqd) > 0 ? res.data.wxptXqd : 0,
      //   cgqXqd: Number(res.data.cgqXqd) > 0 ? res.data.cgqXqd : 0,
      //   fblXqd: Number(res.data.fblXqd) > 0 ? res.data.fblXqd : 0,
      //   qyXqd: Number(res.data.qyXqd) > 0 ? res.data.qyXqd : 0,
      // };

      this.pieChartData = [
        res.data.wxptXqd,
        res.data.cgqXqd,
        res.data.fblXqd,
        res.data.qyXqd,
        { name: userid, isCenter: true, value: "" },
      ];
    });
    this.getHistory(id, userid);
  },
};
</script>

<style lang="scss" scoped>
.tuisong_details {
  display: flex;
  //   左侧内容
  .tuisong_details_left {
    width: 1300px;
    height: 100%;
    overflow: hidden;
    // 左侧图片
    img {
      margin: 30px 68px 20px;
      width: 1164px;
      height: 860px;
    }
    // 左侧标签
    .tdl_tags {
      padding-left: 68px;
      max-width: 1164px;
      overflow: hidden;
      span {
        display: inline-block;
        background: #155059;
        border-radius: 2px;
        font-size: 12px;
        color: #00d9f3;
        padding: 3px 8px;
        margin-right: 4px;
        margin-bottom: 4px;
      }
    }
  }
  //   右侧详情
  .tuisong_details_right {
    width: 550px;
    border-left: 1px solid #0ee695;
    .tuisong_details_right_box {
      padding: 30px 60px;
      // 详情标题
      .tdr_title {
        padding-left: 50px;
        padding-top: 10px;
        color: #2ed97a;
        width: 400px;
        height: 60px;
        background-image: url("../assets/image/组 6(13).png");
        background-size: 100% 100%;
        font-size: 24px;
        line-height: 22px;
        span {
          height: 9px;
          font-size: 10px;
          font-weight: 400;
          opacity: 0.4;
        }
      }
      // 详情内容
      .tdr_content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 30px;
        p {
          width: 50%;
          font-size: 18px;
          font-weight: 400;
          color: #baffe5;
          line-height: 26px;
          margin-bottom: 18px;
          .tdr_content_view {
            cursor: pointer;
            font-size: 16px;
            padding: 2px 8px;
            border: 1px solid #2ed97a;
            border-radius: 4px;
          }
        }
        // 有关时间单独一行
        // .tdr_content_date {
        //   width: 100%;
        // }
      }
    }
  }
  // 滚动条样式 隐藏横向滚动条
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
    //隐藏自带的滚动条
    margin-right: -66px !important;
  }
  ::v-deep .is-horizontal {
    display: none;
  }
}
</style>
